/* Estilos básicos */
.slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider-content {
  display: flex;
  flex-wrap: nowrap;
  width: 800%; /* 100% por imagem * 8 imagens */
  animation: slider 40s infinite; /* duração maior para 8 imagens */
}

.slider-content img {
  width: 12.5%; /* 100 / 8 = 12.5% */
  height: auto;
  object-fit: contain;
}

/* Animação para 8 imagens */
@keyframes slider {
  0% {
    margin-left: 0;
  }
  10% {
    margin-left: 0;
  }

  12.5% {
    margin-left: -100%;
  }
  22.5% {
    margin-left: -100%;
  }

  25% {
    margin-left: -200%;
  }
  35% {
    margin-left: -200%;
  }

  37.5% {
    margin-left: -300%;
  }
  47.5% {
    margin-left: -300%;
  }

  50% {
    margin-left: -400%;
  }
  60% {
    margin-left: -400%;
  }

  62.5% {
    margin-left: -500%;
  }
  72.5% {
    margin-left: -500%;
  }

  75% {
    margin-left: -600%;
  }
  85% {
    margin-left: -600%;
  }

  87.5% {
    margin-left: -700%;
  }
  97.5% {
    margin-left: -700%;
  }

  100% {
    margin-left: 0;
  }
}

  .segundoslide{
     width: 200px; /* Largura do contêiner */
     height: 200px;/* Altura do contêiner */
    overflow: hidden; /* Esconde as imagens que saem da tela */
    position: relative;
    
  }
  .segundo-2{
    display: flex; /* Alinha as imagens horizontalmente */
    flex-wrap: nowrap; /* Impede que as imagens quebrem para a próxima linha */
    width: 400%; /* 100% por imagem * 4 imagens */
    animation: slider 20s infinite; /* Nome da animação, duração e repetição */
  }

  .segundo-2 img{
    width: 25%; /* Cada imagem ocupa 25% da largura do contêiner */
    height: auto;
    object-fit: cover; /* Garante que a imagem cubra a área */

  }